<template>
	<view class="page business-number-add">
		<nav-header title="创建工作号" :show-right="false">
		</nav-header>

		<view style="width: 85%;">
			<!-- <view class="getUname">
				<text>员工 ：</text>
				<view>
					<input @tap="friendShow=true" v-model="nickName" class="custom-input" type="text" placeholder="请选择商友">
				</view>
			</view>
			<view class="getName">
				<text>员工姓名 ：</text>
				<view>
					<input v-model="workNumber.employeeName" type="text" placeholder="请输入文本">
					<text class="tip">将作为工作号对外展示昵称</text>
				</view>
			</view> -->
			<view class="getUname">
				<text class="title">员工</text>
				<view class="right" @tap="friendShow=true">
					<text v-if="!nickName">请选择友商</text>
					<text v-else>{{nickName}}</text>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="getName">
				<view class="nickname text-sm-Medium">
					<view>
						<text>员工姓名 </text>
						<text class="tip"> (将作为工作号对外展示昵称)</text>
					</view>
					<view style="color: #A4A7AE;">
						{{sumName}}/10
					</view>
				</view>
				<view>
					<input v-model="workNumber.employeeName" @input="countName" maxlength="10" type="text" placeholder="请输入">
				</view>
			</view>
		</view>
		<!-- <view class="button">
			<text></text>
			<button @click="submit">创建工作号</button>
		</view> -->
		<tabbar-button-group text="创建工作号" @click="submit"></tabbar-button-group>
	</view>
	<view class="parent-component">
		<SelectUser @onShow="onShowRules" v-if="friendShow" :isShow="friendShow" :method="'GET'" :url="`/friend/list`"
			@userSelected="handleSelectedUsers" />
	</view>

</template>

<script>
	import SelectUser from '../../components/select-user/select-user.vue';
	export default {
		components: {
			SelectUser
		},
		data() {
			return {
				nickName: '',
				friendShow: false,
				companyId: null,
				workNumber: {},
				sumName:0
			}
		},
		methods: {
			submit() {
				this.workNumber.companyId = this.companyId
				this.$http({
					url: `/job/create`,
					data: this.workNumber,
					method: 'POST'
				}).then(res => {
					uni.showToast({
						title: '创建成功',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});


					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
				});
			},
			handleSelectedUsers(selectedUsers) {
				console.log("this.selectedUsers", selectedUsers)
				this.workNumber.userId = selectedUsers[0].id
				this.nickName = selectedUsers[0].nickName
				console.log("this.workNumber", this.nickName)
				this.friendShow = false; // 隐藏 SelectUser 组件
			},
			onShowRules() {
				this.friendShow = false; // 隐藏 SelectUser 组件
			},
			countName(e){
				this.sumName=e.detail.value.length
			},
		},
		onLoad(options) {
			this.companyId = parseInt(options.companyId)
			console.log("群id", this.companyId)

		}
	}
</script>

<style lang="scss" scoped>
	.business-number-add {
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

		.number-none {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #aaa;
			font-size: 30rpx;

			.add {
				color: #007aff;
			}
		}

		.getNumber {
			display: flex;
			align-items: center;

			text {
				width: 160rpx;
			}
		}

		.getUname {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			
			.right{
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: $gray-400;
			}
		
			.title {
				width: 120rpx;
				// margin-top: 10rpx;
			}
		
			input {
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				width: 470rpx;
				padding: 15rpx;
				font-size: 24rpx;
			}
		}

		.getName {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-top: 40rpx;
			
			.nickname{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		
			text {
				width: 160rpx;
				margin-top: 10rpx;
			}
		
			input {
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				// width: 470rpx;
				padding: 15rpx;
				font-size: 24rpx;
			}
		
			.tip {
				font-size: 26rpx;
				color: #aaa;
			}
		}

		.button {
			padding: 30rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			font-size: 26rpx;
			color: #aaa;

			button {
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #007aff;
				color: #fff;
				width: 685rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20rpx;
			}
		}

	}

	.parent-component {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
</style>